<%@page import="com.google.gdata.data.youtube.PlaylistEntry"%>
<%@page import="com.google.gdata.data.youtube.PlaylistFeed"%>
<%@page import="com.google.gdata.data.youtube.PlaylistLinkEntry"%>
<%@page import="com.google.gdata.data.youtube.PlaylistLinkFeed"%>
<%@page import="com.google.gdata.client.youtube.*"%>
<%@page import="com.mathslogica.*"%>
<%@page import="java.net.URL"%>
<%@page import="com.google.gdata.util.AuthenticationException"%>
<%@page import="com.google.gdata.util.ServiceException"%>
<!doctype html>
<html>
<head>
<style type="text/css">
body {
	font-family: Segoe UI, Tahoma, Arial, Verdana, sans-serif;
}

a,abbr,acronym,address,applet,b,big,blockquote,button,canvas,caption,center,cite,code,dd,del,dfn,div,dl,dt,em,embed,fieldset,font,form,h1,h2,h3,h4,h5,h6,hr,html,i,iframe,img,ins,kbd,label,legend,li,menu,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,u,ul,var
	{
	background: none repeat scroll 0 0 transparent;
	border: 0 none;
	font-size: 13px;
	margin: 0;
	padding: 0;
}

#builder-category-items {
	background: none repeat scroll 0 0 #272727;
	color: #EDEDED;
	float: left;
	width: 200px;
	z-index: 0;
}

.categories-header {
	padding-top: 10px;
}

.guide-item-container {
	border-bottom: 1px solid #1B1B1B;
	border-top: 1px solid #323232;
}

#builder-category-items .guide-item {
	line-height: 34px;
}

.guide-item.selected,.guide-item.selected:hover {
	background-color: #1C1C1C;
	border-right-color: #C4302B;
	color: #CCCCCC;
}

#builder-category-items .guide-item {
	line-height: 34px;
}

.guide-item {
	-moz-transition: border 0.2s ease 0s;
	background: -moz-linear-gradient(center top, #292929 0pt, #252525 100%)
		repeat scroll 0 0 #272727;
	border-right: 4px solid transparent;
	color: #999999;
	cursor: pointer;
	display: block;
	font-size: 11px;
	line-height: 28px;
	margin: 0;
	min-height: 28px;
	padding: 0 5px 0 10px;
	position: relative;
}

.image-wrapper {
	padding: 10px;
	box-shadow: 0 0 4px silver;
}
</style>
</head>
<body>
	<table
		style="width: 1000px; margin: auto; box-shadow: 0pt 0pt 5px rgb(27, 27, 27); border: 1px solid rgb(27, 27, 27);"
		cellspacing="0" cellpadding="0">
		<tr>
			<td style="width: 200px; vertical-align: top">
				<%
					YouTubeService service = new YouTubeService(MLConstants.CLIENT_ID,
							MLConstants.APP_KEY);
					try {
						service.setUserCredentials("moazzam.cricket@gmail.com",
								"indiaisthebest12!@");

						String feedUrl = MLConstants.CHANNEL_URL + "/playlists";
						// VideoFeed videoFeed = service.getFeed(new URL(feedUrl),
						// VideoFeed.class);

						PlaylistLinkFeed feed = service.getFeed(new URL(feedUrl),
								PlaylistLinkFeed.class);
				%>
				<ul role="navigation" id="builder-category-items">
					<%
						for (PlaylistLinkEntry entry : feed.getEntries()) {
					%>
					<li class="guide-item-container"><a
						class="category guide-item guide-item-clickable"> <span
							class="guide-item-clickable"> <%=entry.getTitle().getPlainText()%>
						</span>
					</a></li>
					<%
						}

						} catch (AuthenticationException e) {
							// TODO Auto-generated catch block
							e.printStackTrace();
						} catch (ServiceException e) {
							// TODO Auto-generated catch block
							e.printStackTrace();
						}
					%>
				</ul>
			</td>

			<td style="width: 800px; vertical-align: top"><div>
					<table style="width: 100%">
						<tr>

							<%
								String playlistUrl = "http://gdata.youtube.com/feeds/api/playlists/E23E2FDF6E935778";
								PlaylistFeed playlistFeed = service.getFeed(new URL(playlistUrl),
										PlaylistFeed.class);
								int count = 0;
								for (PlaylistEntry playlistEntry : playlistFeed.getEntries()) {
							%>
							<td style="width: 50%">
								<div class="image-wrapper">
									<img
										src="<%=playlistEntry.getMediaGroup().getThumbnails().get(0)
						.getUrl()%>" />
								</div> <%-- 								<div>
									<a href="<%=playlistEntry.getHtmlLink().getHref()%>"><%=playlistEntry.getTitle().getPlainText()%></a>
								</div>
 --%>
							</td>
							<%
								if (count++ % 2 == 1) {
							%>
						</tr>
						<tr>
							<%
								}

								}
							%>
						</tr>
					</table>
				</div></td>
		</tr>
	</table>
</body>
</html>